<template>
  <div class="second-nav-item">
    <template v-for="(item, index) in treeData">
      <el-submenu
        :key="index + item.path"
        :index="item.path || item.code"
        v-if="item.children&&item.isShow"
      >
        <template slot="title">
          <i v-if="item.icon" :class="item.icon"></i>
          <el-tooltip
            class="item"
            effect="dark"
            :disabled="!isShowTooltip"
            :content="item.navTitle"
            placement="right"
          >
            <div @mouseenter="visibilityChange($event)">
              {{ item.navTitle }}
            </div>
          </el-tooltip>
        </template>
        <second-nav-item
          :treeData="item.children"
          :key="item.code"
        ></second-nav-item>
      </el-submenu>
      <el-menu-item
        v-show="item.isShow"
        :key="index + item.navTitle"
        :index="item.path || item.code"
        v-else
      >
        <template slot="title">
          <i v-if="item.icon" :class="item.icon"></i>
          <el-tooltip
            class="item"
            effect="dark"
            :disabled="!isShowTooltip"
            :content="item.navTitle"
            placement="right"
          >
            <div @mouseenter="visibilityChange($event)">
              {{ item.navTitle }}
            </div>
          </el-tooltip>
        </template>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "secondNavItem",
  props: {
    treeData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      isShowTooltip: false,
    };
  },
  created() {
  },
  methods: {
    // 文字溢出显示提示文字
    visibilityChange(event) {
      const ev = event.target;
      const ev_weight = ev.scrollWidth; // 文本的实际宽度
      const content_weight = ev.clientWidth; // 文本的可视宽度
      if (ev_weight > content_weight) {
        // 实际宽度 > 可视宽度  文字溢出
        this.isShowTooltip = true;
      } else {
        // 否则为不溢出
        this.isShowTooltip = false;
      }
    },
  },
};
</script>

<style lang="less">
.second-nav-item {
  .el-submenu {
    .el-menu-item {
      padding-left: 40px;
    }
  }
  .el-menu-item {
    border-left: 3px solid transparent;
  }
  .el-menu-item.is-active {
    color: @kr-selected-color;
    background: #e1effc;
    font-weight: 500;
    border-left: 3px solid @kr-selected-color;
  }
  /*  .el-menu-item:hover{
    color: #fff;
    background-color:@kr-hover-color;
  } */
  .el-menu-item,
  .el-submenu__title {
    height: 48px;
    text-align: left;
    font-weight: normal;
    line-height: 48px;
    font-size: 16px;
  }
}
.el-tooltip__popper.is-dark {
  font-size: 16px;
}
</style>
